<template>
  <div>
    <!-- Header Area start  -->
    <div class="header section">
      <!-- Header Bottom  Start -->
      <div class="header-bottom d-none d-lg-block">
        <div class="container position-relative">
          <div class="row align-self-center">
            <!-- Header Logo Start -->
            <div class="col-auto align-self-center">
              <div class="header-logo">
                <router-link to="/">
                  <h2><span>M</span>book<span>shop</span></h2>
                </router-link>
              </div>
            </div>
            <!-- Header Logo End -->

            <!-- Header Action Start -->
            <div class="col align-self-center">
              <div class="header-actions">
                <div class="header_account_list">
                  <a
                    class="header-action-btn search-btn"
                    @click="showSearch"
                    ><i class="icon-magnifier"></i
                  ></a>
                 
                </div>
                <!-- Single Wedge Start -->
                <div class="header-bottom-set dropdown">
                  <button
                    class="dropdown-toggle header-action-btn"
                    data-bs-toggle="dropdown"
                  >
                    <span v-if="user.userUsername">{{user.userUsername}}</span>
                    <i class="icon-user" v-else></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" >
                    <li class="dropdown-item">
                      <router-link to="/shop/account">我的账户</router-link>
                    </li>
                    <li class="dropdown-item"><router-link to="/shop/cart">我的加购</router-link></li>
                    <li class="dropdown-item">
                      <router-link to="/shop/wishlish">我的收藏</router-link>
                    </li>
                    <li class="dropdown-item"><router-link to="/shop/footprint">我的足迹</router-link></li>
                    <li class="dropdown-item"><router-link to="/shop/order">我的订单</router-link></li>
                    
                    <li class="dropdown-item" @click="logout">登出</li>
                  </ul>
                </div>
                <!-- Single Wedge End -->
                <span
                  class="header-action-btn header-action-btn-cart offcanvas-toggle pr-0"
                  @click="showCart"
                >
                  <i class="el-icon-shopping-cart-2"></i>
                  <!-- <span class="cart-amount">€30.00</span> -->
                </span>
                <a
                  href="#offcanvas-mobile-menu"
                  class="header-action-btn header-action-btn-menu offcanvas-toggle d-lg-none"
                >
                  <i class="icon-menu"></i>
                </a>
              </div>
            </div>
            <!-- Header Action End -->
          </div>
        </div>
      </div>
      <!-- Header Bottom  End -->

      <!-- Main Menu Start -->
      <div class="bg-gray d-none d-lg-block sticky-nav">
        <div class="container position-relative">
          <div class="row">
            <div class="col-md-12 align-self-center">
              <div class="main-menu manu-color-white">
                <ul>
                  <li>
                    <router-link to="/"
                      ><i class="el-icon-s-home"></i
                      ><span class="font">首页</span></router-link
                    >
                  </li>
                  <li>
                    <router-link to="/shop/shopping"
                      ><i class="el-icon-s-goods"></i
                      ><span class="font">购物</span></router-link
                    >
                  </li>

                  <li>
                    <router-link to="/shop/email"
                      ><i class="el-icon-message"></i
                      ><span class="font">联系我们</span></router-link
                    >
                  </li>
                  <li>
                    <router-link to="/login"
                      ><i class="el-icon-s-custom"></i
                      ><span class="font">登录</span></router-link
                    >
                  </li>
                  <li>
                    <router-link to="/shop/chat"
                      ><i class="el-icon-chat-dot-round"></i
                      ><span class="font">联系客服</span></router-link
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Main Menu End -->
    </div>
    <!-- Header Area End  -->
    <el-dialog
  title="搜索商品"
  :visible.sync="$store.state.showSearch"
  width="30%"
  style=" margin-top: 250px;"
  >
  <el-input v-model="searchText" placeholder="请输入要搜索的商品名称，回车确认" @keyup.enter.native="search" >
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
  </el-input>
</el-dialog>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import "@/assets/css/title.css";
export default {
  name: "BookShopHeader",

  components: {},

  directives: {},
  destroyed(){
    // window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    // window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },

  data() {
    return {
      user:{},
      searchText:''
    };
  },
  created(){
      this.user = sessionStorage.getItem("user1") ? JSON.parse(sessionStorage.getItem("user1")) : {}

  },
  mounted() {
    //添加监听事件  
  

  },
  
  methods: {
    showSearch(){
      this.$store.commit('Search')
    },
    search(){
      this.$store.commit('setSeachText',this.searchText)
      this.$router.push(
        '/shop/shopping',
      )
      this.$store.commit('Search')
      
      this.searchText=''
    },
        beforeunloadHandler(e){
      // todo   在页面刷新或关闭之前需要处理得操作，例如清除或保存数据
      sessionStorage.removeItem('user1')
    },
    showCart(){
      if (this.user.userUsername) {
        this.$store.commit('changeShowCart')
      }else{
        this.$message({
          message: '请先登录',
          type: 'info'
        });
        return;
      }
        
    },
    logout(){
      if (this.user.userUsername) {
        sessionStorage.removeItem('user1')
      this.$message({
          message: '已退出登录',
          type: 'info'
        });
        this.user={}
        this.$router.push('/')
      }else{
        this.$message({
          message: '请先登录',
          type: 'info'
        });
      }
      
    }
  },
};
</script>

<style scoped>
.font {
  font-weight: bolder;
  font-size: 20px;
 
}
.header-bottom{
  padding: 0;
}

</style>